<template>
    <div>


        <el-tree style="width: 90%; margin: 0 auto;" :data="listTree" node-key="id" default-expand-all
            :expand-on-click-node="false">
            <template #default="{ node, data }">
                <span class="custom-tree-node">
                    <span>{{ data.name }}</span>
                    <span>
                        <a style="margin-right: 10px;">{{ data.managerName }}</a>
                        <!-- <a @click="append(data)"> Append </a> -->
                        <!-- <a style="margin-left: 8px" @click="remove(node, data)"> Delete </a> -->
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                操作
                                <el-icon class="el-icon--right">
                                    <arrow-down />
                                </el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="addchild(data)">添加子部门</el-dropdown-item>
                                    <el-dropdown-item @click="updchild(data)">编辑部门</el-dropdown-item>
                                    <el-dropdown-item @click="delchild(data)">删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </span>
                </span>
            </template>
        </el-tree>
        <!-- 弹框 -->
        <el-dialog v-model="dialogVisible" :title="tit" width="500" :before-close="handleClose">
            <el-form :label-position="labelPosition" label-width="auto" :model="formLabelAlign"
                style="max-width: 600px">
                <el-form-item label="Name">
                    <el-input v-model="formLabelAlign.name" />
                </el-form-item>
                <el-form-item label="Activity zone">
                    <el-input v-model="formLabelAlign.region" />
                </el-form-item>
                <el-form-item label="Activity form">
                    <el-input v-model="formLabelAlign.type" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="ok">确定</el-button>
                    <el-button @click="no">
                        取消
                    </el-button>
                </div>
            </template>
        </el-dialog>



    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch, h } from 'vue'
import axios from 'axios'
import type Node from 'element-plus/es/components/tree/src/model/node'
import createTree from '../components/menu'
import type { FormProps } from 'element-plus'
// 弹框
import { ElMessageBox } from 'element-plus'
import {getTree} from '../axios/user'

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
    dialogVisible.value = false
}

// 弹框表单
const labelPosition = ref<FormProps['labelPosition']>('right')

const formLabelAlign = reactive({
    name: '',
    region: '',
    type: '',
})


interface Tree {
    id: number
    label: string
    children?: Tree[]
}

let listTree = ref<any[]>([])
onMounted( () => {
    
    getTree().then(res => {
        console.log(res);
        listTree.value = createTree(res.data.data)
    })
  

   

})

// 新
let tit = ref<any>(null)
const addchild = (data) => {
    dialogVisible.value = true
    tit.value = '添加'

}

const updchild = (data) => {
    console.log(data);
}

const delchild = (data) => {
    console.log(data);
}

// 确定
const ok = () => {


}
// 取消
const no = () => {


}



let id = 1000
// 旧
const append = (data: Tree) => {
    const newChild = { id: id++, label: 'testtest', children: [] }
    if (!data.children) {
        data.children = []
    }
    data.children.push(newChild)
    dataSource.value = [...dataSource.value]
}

const remove = (node: Node, data: Tree) => {
    const parent = node.parent
    const children: Tree[] = parent.data.children || parent.data
    const index = children.findIndex((d) => d.id === data.id)
    children.splice(index, 1)
    dataSource.value = [...dataSource.value]
}





const dataSource = ref<Tree[]>([
    {
        id: 1,
        label: 'Level one 1',
        children: [
            {
                id: 4,
                label: 'Level two 1-1',
                children: [
                    {
                        id: 9,
                        label: 'Level three 1-1-1',
                    },
                    {
                        id: 10,
                        label: 'Level three 1-1-2',
                    },
                ],
            },
        ],
    },
    {
        id: 2,
        label: 'Level one 2',
        children: [
            {
                id: 5,
                label: 'Level two 2-1',
            },
            {
                id: 6,
                label: 'Level two 2-2',
            },
        ],
    },
    {
        id: 3,
        label: 'Level one 3',
        children: [
            {
                id: 7,
                label: 'Level two 3-1',
            },
            {
                id: 8,
                label: 'Level two 3-2',
            },
        ],
    },
])

</script>
<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>